<template>
    <div class="week-product">
        <div class="mytitle">
            <span></span>
            <h3>{{ title }}</h3>
        </div>

        <ul>
            <li v-for="item in newGoodsList" :key="item.id" @click="clickFn(item.id)">
                <img :src="item.list_pic_url" alt="" />
                <p>{{ item.name }}</p>
                <p>{{ item.retail_price }}</p>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'week-product',
    props: ['newGoodsList', 'title'],
    methods: {
        clickFn(id) {
            this.$router.push({ path: '/productDetail', query: { id: id } })
        }
    }
}
</script>

<style lang="less" scoped>
.week-product {
    .mytitle {
        text-align: center;
        font-size: 16px;
        margin-top: 20px;
        position: relative;
        height: 50px;
        span {
            width: 50%;
            height: 2px;
            background-color: #ccc;
            display: inline-block;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        h3 {
            width: 30%;
            background-color: #fff;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    }
    ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        li {
            width: 49%;
            img {
                width: 100%;
            }
            p {
                text-align: center;
                font-size: 16px;
            }
        }
    }
}
</style>